<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue的模板语法</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<!--
  Vue的模板语法
2.1 插值语法
	功能：用于解析标签体中的内容。
	写法：{{xxx}},xxx是js表达式，可以直接读取data中的数据。

2.2 指令语法
	功能：用于解析标签（包括标签属性、标签体内容、绑定事件）
	写法：v-????
	举例：vue有很多的指令语法，此处我们用v-bind来举例 v-bind:href="xxx" 或者简写为 :href="xxx",xxx仍然为js表达式。
  -->
<body>
  <div id="root">
    <!--插值语法-->
    <h1>Hello {{name}}</h1>
    <br/>
    <!--指令语法-->
    <a v-bind:href="company.url">欢迎进入{{company.name}}学习</a>
    <a :href="company.url">欢迎进入{{company.name}}</a>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false
  new Vue({
    el:'#root',
    data:{
      name:'tom',
      company:{
        name:'Asiainfo',
        url:'http://www.baidu.com'
      }
    }
  })
</script>
</html>